<template>
  <div class="page-login">
    <div class="wrap">
      <h1>管理系统</h1>
      <n-form
        :model="formData"
        :rules="formRules"
        ref="formRef"
        label-placement="left"
        label-width="auto"
      >
        <n-form-item path="adminname">
          <n-input
            v-model:value="formData.adminname"
            placeholder="请输入账号"
          />
        </n-form-item>
        <n-form-item path="password">
          <n-input v-model:value="formData.password" placeholder="请输入密码" />
        </n-form-item>
        <n-form-item>
          <n-button type="info" block @click="onLogin"> 登录 </n-button>
        </n-form-item>
      </n-form>
    </div>
  </div>
</template>

<script setup>

import {useMenuHeaderStore} from "../../stores/menu-header"
import {useManegerStore} from "../../stores/maneger"

import {login} from "../../api/banner.js"
import { reactive,ref} from "vue"
import { useRouter } from "vue-router";

import { useStore } from "vuex";
import { computed } from "vue";

const store = useStore();
console.log("store", store);

const loader = computed(() => {
  return store.state;
});

    const  formData=reactive({
        adminname: "",
        password: "",
      })
    const  formRules=reactive({
        adminname:[{required:true,message:"请输入账号",trigger:  'blur'}],
        password:[{required:true,message:"请输入密码",trigger:  'blur'}],
      })

    //pinia
    const menuHeaderStore=useMenuHeaderStore()
    const manegerStore=useManegerStore()
    const formRef = ref()

    const router=useRouter()
      const  onLogin =async ()=>{
      //navie组件校验不通过输出错误的数组，通过不显示
        /* this.$refs.formRef.validate((FormValidationError)=>{
          console.log(FormValidationError);
          if(FormValidationError==undefined){
          }
        }) */

        //navie组件校验this.$refs.formRef.validate是一个promise，then,通过，catch不通过
        /* this.$refs.formRef.validate.then(()=>{
          console.log(true);
        }).catch((err)=>{
          console.log(false);
        }) */


        ///this.$refs.formRef.validate是promise对象，那么前面可以加await变成同步，
        //所处的环境前面得加上async
        //await this.$refs.formRef.validate()//校验不通过会直接抛出异常，通过直接执行下面的代码
        //因此这里可以直接写

        //如果要捕获这个错误，使用try catch
        
        try {
          await formRef.value.validate()
          login({
            adminname: formData.adminname,
            password:formData.password
          }).then((data)=>{
            console.log(data);//data得到的是一个对象，需要再.data才能拿到数据，数据中有token，存到仓库
            localStorage.setItem("token",data.data.token)

            menuHeaderStore.setUsername(data.data.adminname)
            manegerStore.setManegerData(data.data)

          store.commit("setManegerData",data.data)
            //this.$router.push("/")


            //登录后跳转到第一个有权限的页面
            const route=manegerStore.permissionRoutes[0]
            function getName(route){
            let str=""
            if(route.children&&route.children.length>0){
              str=getName(route.children[0])
            }else{
              str=route.name
            }
            return str
          }
          console.log(getName(route));
          router.push(getName(route))

          }).catch((err)=>{
            console.log(err);
          })
        } catch (error) {
          console.log(error);
        }

    }
</script>
<style lang="scss">
.page-login {
  height: 100%;
  background: url("http://mms0.baidu.com/it/u=1092599495,3937750983&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=700&h=394")
    no-repeat;
  background-size: cover;
  background-attachment: fixed;
  & h1 {
    text-align: center;
    color: #333;
  }
}
.wrap {
  width: 400px;
  padding: 20px 30px;
  background-color:  #fff;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  & .n-form-item {
    margin: 10px;
  }
  & .n-input__input {
    line-height: 40px;
  }
  & .n-button {
    width: 100%;
    background: #6266eb;
  }
}
.n-form-item-label__text {
  color: white;
  font-size: 16px;
}
</style>
